<template>
  <BasicTable :columns="columns" :data-source="tableData" :isRowSelection="false" :scroll="{ x: 1500 }">
    <template #bodyCell="{ column, record, index }">
      <template v-if="column.dataIndex === 'serialNumber'">
        {{ index + 1 }}
      </template>

      <template v-if="column.dataIndex === 'collect_time'">
        {{ formatToDateTime(record.collect_time * 1000) }}
      </template>

      <template v-if="column.dataIndex === 'resource_type'">
        {{ selectValueFormatter(RESOURCE_TYPE, record.resource_type) }}
      </template>

      <template v-if="column.dataIndex === 'site_name'">
        <Tooltip :str="record.site_name" />
      </template>
      <template v-if="column.dataIndex === 'content_type'">
        {{ selectValueFormatter(CONTENT_TYPE, record.content_type) }}
      </template>
      <template v-if="column.dataIndex === 'collectResult'">
        {{ formatCollectResult(record) }}
      </template>

      <span v-if="column.key === 'operationBar'" class="operation-bar">
        <a-button
          type="link"
          @click="
            tosCollectLogDetailedList(
              record.id,
              record.collect_id,
              record.resource_type,
              record.content_type,
              record.site_id
            )
          "
          >采集明细</a-button
        >
      </span>
    </template>
  </BasicTable>
</template>

<script lang="ts" setup name="CollectLogTable">
import BasicTable from '../../../components/BasicTable.vue'
import Tooltip from '../../../components/Tooltip.vue'
import { formatToDateTime } from '@/utils/format'
import { RESOURCE_TYPE, CONTENT_TYPE, selectValueFormatter } from '@/stores/modules/collect-manage/select-data-source'
import { getTableData, tableData } from '../../../hooks/useTable'
import { useRouter } from 'vue-router'

getTableData()

const columns = [
  {
    title: '序号',
    dataIndex: 'serialNumber',
    key: 'serialNumber'
  },
  {
    title: '采集时间',
    dataIndex: 'collect_time',
    key: 'collect_time'
  },
  {
    title: '资源名称',
    dataIndex: 'resource_name',
    key: 'resource_name'
  },
  {
    title: '资源类型',
    dataIndex: 'resource_type',
    key: 'resource_type'
  },
  {
    title: '内容类型',
    dataIndex: 'content_type',
    key: 'content_type'
  },
  {
    title: '采到站点',
    dataIndex: 'site_name',
    key: 'site_name'
  },
  {
    title: '采集结果',
    dataIndex: 'collectResult',
    key: 'collectResult'
  },
  {
    title: '操作',
    key: 'operationBar'
  }
]

type TableDataItemType = {
  id: number
  collect_time: number
  resource_name: string
  resource_type: number
  content_type: number
  site_id: string
  site_name: string
  num_success: number
  num_fail: number
}

// const tableData = reactive<TableDataItemType[]>([
//   {
//     id: 1,
//     collect_time: Date.now(),
//     resource_name: '资源名称XXX',
//     resource_type: 1,
//     content_type: 1,
//     site_id: '1',
//     site_name: '爱奇艺站点',
//     num_success: 100,
//     num_fail: 2
//   },
//   {
//     id: 2,
//     collect_time: Date.now(),
//     resource_name: '资源名称XXX',
//     resource_type: 2,
//     content_type: 1,
//     site_id: '1',
//     site_name: '爱奇艺站点',
//     num_success: 100,
//     num_fail: 2
//   },
//   {
//     id: 3,
//     collect_time: Date.now(),
//     resource_name: '资源名称XXX',
//     resource_type: 2,
//     content_type: 2,
//     site_id: '1',
//     site_name: '爱奇艺站点',
//     num_success: 100,
//     num_fail: 2
//   },
//   {
//     id: 4,
//     collect_time: Date.now(),
//     resource_name: '资源名称XXX',
//     resource_type: 2,
//     content_type: 3,
//     site_id: '1',
//     site_name: '爱奇艺站点',
//     num_success: 100,
//     num_fail: 2
//   }
// ])

const getResourceType = (type: number) => {
  switch (type) {
    case 1:
      return '部影片'
    case 2:
      return '个图集'
    case 3:
      return '篇文章'
  }
}
const formatCollectResult = (record: TableDataItemType): string => {
  const { resource_type, num_success, num_fail } = record
  return `总${num_success + num_fail}${getResourceType(resource_type)}，成功${num_success}，失败${num_fail}`
}

const router = useRouter()
const tosCollectLogDetailedList = (
  id: string,
  collect_id: string,
  resource_type: number,
  content_type: number,
  site_id: string
) => {
  router.push({ name: 'CollectLogDetailedList', query: { id, collect_id, resource_type, content_type, site_id } })
}
</script>
<style lang="less" scoped></style>
